<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="ipt">
</body>
<script>
  let data={
    name:'cai'
  }
  let newName=''
  Object.defineProperty(data,'name',{
    //读取的时候发生了数据截持
    get(){
      console.log('我被读取了');
      // data.name=document.getElementById('ipt').value
      //视图影响数据
      // return document.getElementById('ipt').value  不能实时更新数据
      return newName
    },
    set(val){
      // console.log('我被修改了');
      //val是修改对象的值
      console.log('我被修改成',val);
      //数据影响视图
      document.getElementById('ipt').value=val
      newName=val
    }
  })
  //监听输入框事件 视图影响数据 只要输入框发生改变就能改变data.name的值
  document.getElementById('ipt').addEventListener('input',(e)=>{
    data.name=e.target.value
  })
</script>
</html>